<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/static/backstage/css/layui.css}" rel="stylesheet">
    <style>
        table {
            border-collapse: collapse;
        }

        table th, td {
            padding: 9px 15px;
            font-size: 14px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            min-height: 20px;
            text-align: center;
        }

        table td {
            width: 200px;
        }
    </style>
</head>
<body>
<!--设置滚动条-->
<style>
    body::-webkit-scrollbar {
        width: 10px;
    }

    body::-webkit-scrollbar-track {
        /*background: #999;*/
        background: #fff;
        border-radius: 2px;
    }

    body::-webkit-scrollbar-thumb {
        /*background: red;*/
        background: #fff;
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb:hover {
        /*background: #333;*/
        background: #fff;
    }

    body::-webkit-scrollbar-corner {
        /*background: #179a16;*/
        background: #fff;
    }
</style>
<div class="table_content" id="table_content" style="width: 100%;background-color: #fff;margin: 0 auto;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>标签列表</legend>
    </fieldset>
    <div style="height: 50px;">
        <a href="javascript:void(0);" id="addTag"
           style="color: #fff;background-color: #009688;text-decoration: none;padding: 5px 10px 5px 10px;border-radius: 2px;font-size: 15px;">新增</a>
        <a href="javascript:void(0);" id="refreshBtn"
           style="color: #fff;background-color: #009688;text-decoration: none;padding: 5px 10px 5px 10px;border-radius: 2px;font-size: 16px;">刷新</a>
    </div>
    <table>
        <tr style="background-color: #f2f2f2;font-weight: bold;">
            <td>ID</td>
            <td>标签名</td>
            <td style="width: 340px;">标签描述</td>
            <td>操作</td>
        </tr>
        <!--循环信息-->
        <tr th:each="tagDto:${tagVO.pageList}">
            <td th:text="${tagDto.tagId}"></td>
            <td th:text="${tagDto.tagName}"></td>
            <td>
                <p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;" th:text="${tagDto.tagDescription}"
                   th:title="${tagDto.tagDescription}"></p>
            </td>
            <td>
                <div style="float: left;margin-right: 11px;margin-left: 12px">
                    <a href="javascript:void(0);" onclick="showOneTagById(this)" style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;"
                       th:type="${tagDto.tagId}">查看</a>
                </div>
                <div style="float: left;margin-right: 11px;"><a href="javascript:void(0);"
                                                                onclick="editById(this)"
                                                                style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;"
                                                                th:type="${tagDto.tagId}">编辑</a>
                </div>
                <div style="float: left;margin-right: 11px;"><a href="javascript:void(0);"
                                                                onclick="deleteById(this)"
                                                                style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;"
                                                                th:type="${tagDto.tagId}">删除</a>
                </div>
            </td>
        </tr><!--循环END-->
    </table>
    <!--分页导航-->
    <div style="width: 44%;height: 55px;margin: auto;font-size: 15px">
        <a href="javascript:void(0);" id="preBtn" name="pre"
           style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;"
           title="上一页" type=""> 上一页 </a>
        <a href="javascript:void(0);" id="nextBtn" name="next"
           style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;"
           title="下一页"> 下一页 </a>
        &nbsp;跳转至 &nbsp;<input autocomplete="off" id="pageJumpInput" maxlength="3"
                               oninput="value=value.replace(/[^\d]/g,'')"
                               style="width: 25px;border: 1px solid #e6e6e6;border-radius: 2px;padding: 5px 5px;"
                               type="text">&nbsp; 页 &nbsp;<input id="pageJumpBtn" style="font-size: 14px;padding: 4px 5px 4px 6px;border-radius: 2px;background-color: #009688;color: #fff;border: none;" type="button"
                                                                   value="确 认">
        &emsp;当前第 [[${tagVO.current}]] 页，共 [[${tagVO.total}]] 页
    </div>
</div>
<!--新增页面-->
<div class="table_add" id="table_add"
     style="z-index:999;border: 1px solid #e6e6e6; display: none;background-color: #fff;width: 73%;height: 400px;inset: 20% 12%;position: absolute;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>新增标签</legend>
    </fieldset>
    <!-- 新增标签页面 -->
    <form action="" class="layui-form" id="tagAddForm" method="" style="margin-top: 40px;">
        <input name="tagId" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">标签名称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input maxlength="15" title="最大不能超过15个字符！" autocomplete="off" class="layui-input" id="add_tagName" lay-verify="required" name="tagName"
                       type="text">
            </div>
            <div id="verNameDiv"
                 style="display: none;position: absolute;left: 47%;top: 23.3%;font-weight: 600;letter-spacing: 1px;"></div>
        </div>
        <div class="layui-form-item layui-form-text" style="margin-top: 40px;">
            <label class="layui-form-label">标签描述</label>
            <div class="layui-input-block">
                <textarea maxlength="300" title="最大不能超过300个字符！" class="layui-textarea" id="add_tagDescription" lay-verify="required" name="tagDescription"
                          style="width: 90%;"></textarea>
            </div>
            <div id="verDescriptionDiv"
                 style="display: none;position: absolute;left: 14%;top: 55%;font-weight: 600;letter-spacing: 1px;"></div>
        </div>
        <div class="layui-form-item" style="margin-top: 40px;">
            <div class="layui-input-block">
                <button class="layui-btn" id="addSureBtn" lay-filter="addForm" lay-submit>立即提交</button>
                <input class="layui-btn layui-btn-primary" id="addCancelBtn" type="button" value="取消">
            </div>
        </div>
    </form>
</div>
<!--编辑页面-->
<div class="table_update" id="table_update"
     style="z-index:999;border: 1px solid #e6e6e6; display: none;background-color: #fff;width: 73%;height: 400px;inset: 20% 12%;position: absolute;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>编辑标签</legend>
    </fieldset>
    <!-- 编辑标签页面 -->
    <form class="layui-form" id="tagEditForm" style="margin-top: 40px;">
        <input id="editTagId" name="tagId" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">标签名称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input maxlength="15" title="最大不能超过15个字符！" autocomplete="off" class="layui-input" id="editTagName" lay-verify="required" name="tagName"
                       type="text">
                <input id="monitorName" type="hidden" value="">
            </div>
            <div id="verEditNameDiv"
                 style="display: none;position: absolute;left: 47%;top: 24%;font-weight: 600;letter-spacing: 1px;"></div>
        </div>
        <div class="layui-form-item layui-form-text" style="margin-top: 40px;">
            <label class="layui-form-label">标签描述</label>
            <div class="layui-input-block">
                <textarea maxlength="300" title="最大不能超过300个字符！" class="layui-textarea" id="editTagDescription" lay-verify="required" name="tagDescription"
                          style="width: 90%;"></textarea>
                <input type="hidden" id="monitorDes" value="">
            </div>
            <div id="verEditDescriptionDiv"
                 style="display: none;position: absolute;left: 14%;top: 68%;font-weight: 600;letter-spacing: 1px;"></div>
        </div>
        <div class="layui-form-item" style="margin-top: 40px;">
            <div class="layui-input-block">
                <button class="layui-btn" id="updateSureBtn" lay-filter="editForm" lay-submit>立即提交</button>
                <input class="layui-btn layui-btn-primary" id="updateCancelBtn" type="button" value="取消">
            </div>
        </div>
    </form>

</div>
<!--查看-->
<div class="table_show" id="table_show"
     style="z-index:999;border: 1px solid #e6e6e6; display: none;background-color: #fff;width: 73%;height: auto;position: absolute;left: 13%;top: 20%;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查看标签</legend>
    </fieldset>
    <div id="showTagNameDiv" style="font-size: 18px;height: 50px;margin-left: 5%;font-weight: 300;margin-bottom: 20px;line-height: 50px;"></div>
    <div class="layui-col-md6" style="width: 90%;margin-left: 5%;">
        <div class="layui-panel">
            <div style="text-indent: 2em;padding: 30px 30px;" id="showTagDes"></div>
        </div>
    </div>
    <button class="layui-btn layui-btn-primary" id="showCancelBtn" style="margin-top: 30px;margin-left: 5%;margin-bottom: 30px;">取消</button>
</div>
<!--遮罩-->
<div id="zhezhao"
     style="width: 100%;height: 100%;background-color:#000;opacity:0.3;display:none;z-index:500;position: absolute;left: 0;top: 0;"></div>
<script th:src="@{/static/backstage/js/jquery-2.1.1.js}"></script>
<script th:src="@{/static/backstage/js/layui.js}"></script>
<script th:inline="javascript">
    //上一页按钮
    $("#preBtn").click(function () {
        var current = [[${tagVO.current}]];
        var total = [[${tagVO.total}]];
        if (current == 1) {
            layer.msg('没有上一页了！');
        } else if (current > 1) {
            layer.load(1, {time: 0.2 * 1000});
            $.ajax({
                url: "/backstage/queryTagList/" + (Number(current) - Number(1)),
                success: function (html) {
                    setTimeout(function () {
                        $("#table_content").html(html);
                    }, 200)
                }
            });
        } else if (current > total) {
            alert("页码错误！");
        }
    });
    //下一页按钮
    $("#nextBtn").click(function () {
        var current = [[${tagVO.current}]];
        // console.log(current);
        var total = [[${tagVO.total}]];
        // console.log(total);
        if (current < total && current > 0) {
            layer.load(1, {time: 0.2 * 1000});
            $.ajax({
                url: "/backstage/queryTagList/" + (Number(current) + Number(1)),
                success: function (html) {
                    setTimeout(function () {
                        $("#table_content").html(html);
                    }, 200)
                }
            });
        } else if (current == total) {
            layer.msg('没有下一页了！');
        } else {
            layer.msg('没有下一页了！');
        }
    });
    //跳转按钮
    $("#pageJumpBtn").click(function () {
        //获取当前页码
        var current = [[${tagVO.current}]];
        //获取总页码
        var total = [[${tagVO.total}]];
        //获取input中的输入值
        var jumpPage = $("#pageJumpInput").val();
        if (jumpPage >= 1 && jumpPage <= total && jumpPage != current) {
            $.ajax({
                url: "/backstage/queryTagList/" + (jumpPage),
                success: function (html) {
                    $("#table_content").html(html);
                    setTimeout(function () {
                        layer.msg('已为您跳转至第 ' + jumpPage + ' 页！');
                    }, 100)
                }
            });
        } else if (jumpPage == current) {
            layer.msg('当前为第 ' + current + ' 页，无须跳转！');
        } else {
            layer.msg('页码输入有误，请重新输入！', {icon: 2});
        }
    });
    //刷新按钮
    $("#refreshBtn").click(function () {
        layer.load(1, {time: 0.05 * 1000});
        $.ajax({
            url: "/backstage/queryTagList/1",
            success: function (html) {
                setTimeout(function () {
                    $("#table_content").html(html);
                    layer.msg('已为您刷新');
                }, 300)
            }
        });

    });
    // 伪刷新
    function refresh() {
        var current = [[${tagVO.current}]];
        $.ajax({
            url: "/backstage/queryTagList/" + current,
            success: function (html) {
                $("#table_content").html(html);
            }
        });
    }
    // 点击显示新增页面
    $("#addTag").click(function () {
        $('#zhezhao').css('display', 'block');
        $("#table_add").css("display", "block");
    });
    // 取消新增页面
    $("#addCancelBtn").click(function () {
        $('#zhezhao').css('display', 'none');
        $("#table_add").css("display", "none");
        $("#add_tagName").val("");
        $("#add_tagDescription").val("");
        $("#verNameDiv").html("");
        $("#verDescriptionDiv").html("");
    });
    //验证新增标签是否已存在
    $("#add_tagName").blur(function () {
        var name = $("#add_tagName").val();
        if (name != "" || $.trim(name).length != 0) {
            $.get(
                "/backstage/selectByName/" + name,
                function (re) {
                    if (re == true) {
                        $("#verNameDiv").html("该标签已经存在");
                        $("#verNameDiv").css("display", "block");
                        $("#verNameDiv").css("color", "red");
                        $("#addSureBtn").attr("disabled", true);
                    } else {
                        $("#verNameDiv").css("display", "block");
                        $("#verNameDiv").html("该标签可用");
                        $("#verNameDiv").css("color", "#008B45");
                        $("#addSureBtn").attr("disabled", false);
                    }
                }
            )
        }
    });
    //添加标签
    layui.use('form', function () {
        var form = layui.form,
            $ = layui.$;
        form.on('submit(addForm)', function (data) {
            //提交按钮失效
            $("#addSureBtn").attr("disabled", true);
            //提交表单
            var tableData = $("#tagAddForm").serialize();
            $.post(
                "/backstage/addTag",
                "action=addTag" + tableData,
                function (re) {
                    if (re == true) {
                        //添加成功
                        layer.msg('提交成功！', {icon: 6});
                        refresh();
                    } else {
                        //添加失败
                        layer.msg('提交失败！', {icon: 5});
                        refresh();
                    }
                    $("#table_add").css("display", "none");
                    $("#zhezhao").css("display", "none");
                }
            );
        })
    })
    //点击显示更新页面
    function editById(data) {
        $.get(
            "/backstage/updateTagById/" + data.type,
            "action=updateTagById",
            function (re) {
                $("#editTagId").attr("value", re.tagId);
                $("#editTagName").attr("value", re.tagName);
                $("#monitorName").attr("value", re.tagName);
                $("#editTagDescription").html(re.tagDescription);
                $('#monitorDes').attr('value',re.tagDescription);
            });
        setTimeout(function () {
            $('#zhezhao').css('display', 'block');
            // 点击显示更新页面
            $("#table_update").css("display", "block");
        }, 200)
    }
    //验证标签名称是否为空
    $("#editTagName").blur(function () {
        var currentName = $("#monitor").val();
        var tagName = $("#editTagName").val();
        if (tagName == "" || $.trim(tagName).length == 0) {
            $("#verEditNameDiv").html("");
        } else {
            //判断input框中是否改变
            //！=时，框内的内容发生改变
            if (tagName == currentName) {
                $("#updateSureBtn").attr("disabled", false);
                $("#verEditNameDiv").html("");
                layer.msg('标签名称为改变！', {icon: 5});
                return false;
            } else {
                $.get(
                    "/backstage/selectByName/" + tagName,
                    "action=selectByName",
                    function (re) {
                        if (re == true) {
                            $("#verEditNameDiv").html("该标签已经存在");
                            $("#verEditNameDiv").css("display", "block");
                            $("#verEditNameDiv").css("color", "red");
                            $("#updateSureBtn").attr("disabled", true);
                        } else {
                            $("#verEditNameDiv").css("display", "block");
                            $("#verEditNameDiv").html("该标签可用");
                            $("#verEditNameDiv").css("color", "#008B45");
                            $("#updateSureBtn").attr("disabled", false);
                        }
                    }
                )
            }
        }
    });
    //更新标签信息
    layui.use('form', function () {
        var form = layui.form,
            $ = layui.$;
        form.on('submit(editForm)', function (data) {
            var currentName = $("#monitorName").val();
            var currentDes = $('#monitorDes').val();
            var tagName = $("#editTagName").val();
            var tagDes = $('#editTagDescription').val();
            if (tagName == currentName && currentDes == tagDes) {
                $("#verEditNameDiv").html("");
                layer.msg('标签未发生改变，无法提交！', {icon: 5});
                return false;
            } else {
                //按钮失效
                $("#updateSureBtn").attr("disabled", true);
                var dataSerialize = $("#tagEditForm").serialize();
                $.post(
                    "http://localhost:8081/backstage/updateTag",
                    "action=updateTag&" + dataSerialize,
                    function (re) {
                        if (re == true) {
                            layer.msg("更新成功！", {icon: 6});
                        } else {
                            layer.msg("更新失败！", {icon: 5});
                        }

                    }
                )
                setTimeout(function () {
                    //刷新当前页面
                    refresh();
                    $("#table_update").css("display", "none");
                    $('#zhezhao').css('display','none');

                }, 100)
            }
        })
    })
    //取消编辑页面
    $("#updateCancelBtn").click(function () {
        $('#zhezhao').css('display', 'none')
        $("#table_update").css("display", "none");
        refresh();
    });
    //删除操作
    function deleteById(data) {
        var deleteId = data.type;
        layer.confirm('确认删除这条分类？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.get(
                "/backstage/queryArticleIdByTagId/" + deleteId,
                "action=queryArticleIdByTagId",
                function (re) {
                    if (re == true) {
                        //存在博文引用该标签，不能删除
                        layer.msg("请先删除使用该标签的博文！", {icon: 2});
                        return false;
                    } else {
                        // layer.msg("删除成功！")
                        //没有博文引用该标签，直接删除
                        $.get(
                            "/backstage/deleteTagById/" + deleteId,
                            "action=deleteTagById",
                            function (re) {
                                if (re == true) {
                                    layer.msg('删除成功！', {icon: 1});
                                } else {
                                    layer.msg('删除失败！', {icon: 2});
                                }
                                refresh();
                            });
                    }
                }
            )
        }, function () {
        });
    }
    //查看标签全部信息
    function showOneTagById(data) {
        let tagId = data.type;
        $.get(
            "/backstage/updateTagById/"+tagId,
            function (data) {
                $('#showTagNameDiv').text(data.tagName);
                $('#showTagDes').text(data.tagDescription);
                $('#zhezhao').css('display','block');
                $('#table_show').css('display','block');
            }
        )
    }
    //查看标签的取消按钮
    $('#showCancelBtn').click(function () {
        $('#zhezhao').css('display','none');
        $('#table_show').css('display','none');
    })
</script>
</body>
</html>